<template>
  <div>
    <div class="select">
      <px-select
        v-model="selectedList"
        multiple
        placeholder="相关指标"
        style="width: 480px; margin-right: 20px"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="2"
        filterable
      >
        <px-option v-for="(item, index) in spcList" :key="index" :label="item.indicatorName" :value="item.jobId" />
      </px-select>
      <px-button type="primary" @click="analysisHandler">分析</px-button>
      <px-button type="primary" plain @click="reset">重置</px-button>
    </div>
    <echartsDom
      v-if="SpcAnalysis.length > 0 && SpcAnalysis[0].pointValues != null"
      style="float: left; width: 100%"
      :width="'100%'"
      :height="'320px'"
      :option="option"
    />
    <div v-else>
      <px-empty :image-size="100" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { spcqueryList, spcquerySpcAnalysis } from "@/api/spc";
import echartsDom from "../../spc/components/echartsDom.vue";
const props = defineProps({
  spcCurrentKey: {
    type: Object,
    default: () => {}
  }
});
const spcList = ref([]);
const selectedList = ref([]);
const SpcAnalysis = ref([]);
const dateRange = ref([]);
const option = ref({});
const yAxis = ref([]);
const chartsList = ref([]);
const series = ref([]);

watch(
  () => SpcAnalysis.value,
  newOption => {
    if (newOption.length > 0) {
      if (newOption[0].pointValues != null) {
        let chartsvalue = newOption.filter(item => item.jobId === selectedList.value[0]);
        chartsList.value = chartsvalue[0].pointValues;

        yAxis.value = newOption.map((item, index) => {
          if (item.pointValues != []) {
            if (index == 0) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else if (index == 1) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else {
              return {
                type: "value",
                name: item.indicatorName,
                position: "right",
                offset: 90 * (index - 1),
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            }
          }
        });
        series.value = newOption.map((item, index) => {
          if (index > 0) {
            return {
              data: item.pointValues.length > 0 ? item.pointValues.map(item => item.value) : [],
              type: "line",
              name: item.indicatorName,
              yAxisIndex: index
            };
          } else {
            return {
              data: item.pointValues.length > 0 ? item.pointValues.map(item => item.value) : [],
              type: "line",
              name: item.indicatorName
            };
          }
        });
        setdata();
      }
    } else {
      chartsList.value = [];
    }
  }
);

watch(
  () => props.spcCurrentKey,
  () => {
    analysisHandler();
  }
);
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
onMounted(() => {
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime());
  dateRange.value = [formatDate(start), formatDate(end)];
  spcqueryList({
    indicatorName: "",
    classCode: "WATER",
    systemCode: [],
    indicatorLevel: "",
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    point: "",
    querySpcCount: false,
    pageNum: 1,
    pageSize: 999
  }).then(res => {
    spcList.value = res.data;
  });
});

/** 分析 */
const analysisHandler = () => {
  let jobIdList = [];
  if (props.spcCurrentKey.uploadSpcJob || props.spcCurrentKey.onlineSpcJob) {
    jobIdList = [...selectedList.value, props.spcCurrentKey.uploadSpcJob, props.spcCurrentKey.onlineSpcJob];
  } else {
    jobIdList = [...selectedList.value];
  }
  spcquerySpcAnalysis({
    jobIdList: jobIdList,
    timePeriod: "hours",
    startTime: dateRange.value[0],
    endTime: dateRange.value[1]
  }).then(response => {
    SpcAnalysis.value = response;
  });
};

/** 重置 */
const reset = () => {
  selectedList.value = [];
  SpcAnalysis.value = [];
};

const setdata = () => {
  option.value = {
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          title: "点击保存为图片"
        }
      }
    },
    grid: {
      left: "5%",
      top: "60px",
      right: `${yAxis.value.length * 3}%`,
      bottom: "10px",
      containLabel: true
    },
    legend: {
      type: "scroll",
      width: "50%"
    },
    tooltip: {
      trigger: "axis",
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      axisLabel: {
        align: "left"
      },
      data: [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00"
      ]
    },
    yAxis: yAxis.value,
    series: series.value
  };
};
</script>

<style scoped lang="scss">
.select {
  display: flex;
  margin-bottom: 20px;
}
</style>
